import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

interface IProps {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  new: boolean,
  cond: any
}

const FormItem = Form.Item;

@connect(({ group }) => ({
  cond: group.cond
}))
class Search extends Component<IProps, any> {

  componentDidMount() {
    setTimeout(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    }, 20);
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'group/updateCond',
          payload: {
            ...values
          }
        });

        this.props.initCurrent()
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol span={4}><FormItem
            label="部门"
            {...formItemLayout}
          >
            {getFieldDecorator('name', {
              rules: [{ message: '部门' }],
            })(
              <Input style={{ width: '100%' }} placeholder="部门" />
            )}
          </FormItem></SearchCol>
          <SearchCol span={20}>
            <SearchRow type="flex" justify="end"><SearchButton htmlType="submit" style={{ marginLeft: '15px' }}>搜索</SearchButton>
              <SearchButton onClick={() => {
                this.props.form.resetFields();
                this.search(e)
              }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>

              {
                this.props.new ? <Link to='/data/group/new'><SearchButton type="primary" icon='plus' style={{ marginLeft: '15px' }}>新增部门</SearchButton></Link> : null
              }</SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<IProps>()(Search);
export default SearchS;
